博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
原来用纯css做瀑布流是这么easy
阅读量:6653 次
发布时间:2019-06-25

本文共 444 字,大约阅读时间需要 1 分钟。

hot3.png

效果

对比

这在没有css3是比较费力的,计算图片的高度,分别做汇总,一会儿往左丢一个,一会儿往右丢一个,使得左右高度相近

现在只有一个属性搞定column-count: n;其中n代表所需要的列数,其他就跟正常的一样写就可以了

核心CSS代码

/*画廊整体*/.gallery {	/*定义列数*/	column-count: 2;	/*列间距*/	column-gap: 4px;}/*图片本身*/.gallery-item image {	width: 100%;}

Dom结构

其中widthFix是一个了不起的属性,之前我做灵动云商城时,微信小程序还没有这个属性,也模拟实现了,是通过getImageInfo变相实现的。

但自从用上了widthFix后,做高度自适应,就是飞一般的感觉了。

一点小tip,以记。

转载于:https://my.oschina.net/huangxiujie/blog/1509910

你可能感兴趣的文章
报警系统QuickAlarm之报警规则的设定与加载
查看>>
【CLI】使用 Curl 下载文件实时进度条显示
查看>>
Android 滤镜效果和颜色通道过滤
查看>>
Ruby开发者已可通过Fog管理Microsoft Azure服务
查看>>
Chrome和HTTPS:安全Web的征途
查看>>
软件专家的对话模式(第一部分)
查看>>
脚本填报表的条件查询
查看>>
从一个开发的角度看负载均衡和LVS
查看>>
Spring Boot(12)——使用MongoDB
查看>>
c++基础(上) 听课流水账
查看>>
Observable
查看>>
k8s使用deployment升级
查看>>
ionic3项目实战教程 - 第10讲 ionic3分类菜单设计(类似外卖)
查看>>
深度解析 | K8S API Server之入门须知
查看>>
LeanEngine 中使用 WebSocket
查看>>
浅入分析和Linux内核相关的文件夹/proc和/sys .
查看>>
Java 二分查找
查看>>
刚刚,阿里开源了一项重磅炸弹,终结程序员“中年危机”!
查看>>
《Spring Boot开发:从0到1》图片
查看>>
教你十分钟构建好 SpringBoot + SSM 框架
查看>>